<template>
  <div class="analysis pd_40">
    <el-row class="analysis_row">
      <el-col :span="8">
        <div class="table_box">
          <table class="analysis_table" >
            <caption><div>游迹实时数据</div></caption>
            <thead align="center">
                <tr height="40px">  
                    <th width="90"></th>
                    <th scope="col" width="80">今日</th>
                    <th scope="col" width="80">昨日</th>
                    <th scope="col" width="80">累计</th>
                </tr>
              </thead>
            <tbody align="center">
                <tr height="30px">
                    <td scope="row">想去看看:</td>
                    <td>2</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
                <tr height="30px">
                    <td scope="row">到此一游:</td>
                    <td>x</td>
                    <td>2</td>
                    <td>2</td>
                </tr>
            </tbody>
          </table>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="table_box">
          <table class="analysis_table" >
              <caption><div>用户实时数据</div></caption>
              <thead align="center">
                  <tr height="40px">  
                      <th width="90"></th>
                      <th scope="col" width="80">今日</th>
                      <th scope="col" width="80">昨日</th>
                      <th scope="col" width="80">累计</th>
                  </tr>
                </thead>
              <tbody align="center">
                  <tr height="30px">
                      <td scope="row">新增用户:</td>
                      <td>22222222</td>
                      <td>222</td>
                      <td>222</td>
                  </tr>
                  <tr height="30px">
                      <td scope="row">活跃用户:</td>
                      <td>xxxxx</td>
                      <td>22222</td>
                      <td>222</td>
                  </tr>
              </tbody>
            </table>
          </div>
      </el-col>
      <el-col :span="8">
        <div class="table_box">
          <table class="analysis_table" >
            <caption><div>系统首页实时数据</div></caption>
            <thead align="center">
                <tr height="40px">  
                    <th width="90"></th>
                    <th scope="col" width="80">今日</th>
                    <th scope="col" width="80">昨日</th>
                    <th scope="col" width="80">累计</th>
                </tr>
              </thead>
            <tbody align="center">
                <tr height="30px">
                    <td scope="row">打开人数:</td>
                    <td>222222</td>
                    <td>222</td>
                    <td>222</td>
                </tr>
                <tr height="30px">
                    <td scope="row">打开次数:</td>
                    <td>xxxxx</td>
                    <td>222222222</td>
                    <td>222</td>
                </tr>
            </tbody>
          </table>
        </div>
      </el-col>


      <el-col :span="8">
        <div class="table_box mg_t20">
          <table class="analysis_table" >
            <caption><div>行旅指南实时数据</div></caption>
            <thead align="center">
                <tr height="40px">  
                    <th width="90"></th>
                    <th scope="col" width="80">今日</th>
                    <th scope="col" width="80">昨日</th>
                    <th scope="col" width="80">累计</th>
                </tr>
              </thead>
            <tbody align="center">
                <tr height="30px">
                    <td scope="row">打开人数:</td>
                    <td>2</td>
                    <td>222</td>
                    <td>22222222</td>
                </tr>
                <tr height="30px">
                    <td scope="row">打开次数:</td>
                    <td>xxxxxxxx</td>
                    <td>22222222</td>
                    <td>22222222</td>
                </tr>
            </tbody>
          </table>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="table_box mg_t20">
          <table class="analysis_table" >
            <caption><div>个人中心实时数据</div></caption>
            <thead align="center">
                <tr height="40px">  
                    <th width="90"></th>
                    <th scope="col" width="80">今日</th>
                    <th scope="col" width="80">昨日</th>
                    <th scope="col" width="80">累计</th>
                </tr>
              </thead>
            <tbody align="center">
                <tr height="30px">
                    <td scope="row">打开人数:</td>
                    <td>2222222</td>
                    <td>222</td>
                    <td>222</td>
                </tr>
                <tr height="30px">
                    <td scope="row">打开次数:</td>
                    <td>xxxxx</td>
                    <td>222222</td>
                    <td>222</td>
                </tr>
            </tbody>
          </table>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="table_box mg_t20">
          <table class="analysis_table" >
            <caption><div>旅说实时数据</div></caption>
            <thead align="center">
                <tr height="40px">  
                    <th width="90"></th>
                    <th scope="col" width="80">今日</th>
                    <th scope="col" width="80">昨日</th>
                    <th scope="col" width="80">累计</th>
                </tr>
              </thead>
            <tbody align="center">
                <tr height="30px">
                    <td scope="row">打开人数:</td>
                    <td>22222222</td>
                    <td>222</td>
                    <td>222</td>
                </tr>
                <tr height="30px">
                    <td scope="row">打开次数:</td>
                    <td>xxxxx</td>
                    <td>222222222</td>
                    <td>222</td>
                </tr>
            </tbody>
          </table>
        </div>
      </el-col>
    </el-row>
     
     <!--七天趋势图-->
    <div class="analysis_echart mg_t40">
      <div class="analysis_list">
        <el-button size="small" @click="isindex(1)" :type="index==1?'primary':''">精品路线</el-button>
        <el-button size="small" @click="isindex(2)" :type="index==2?'primary':''">景点</el-button>
        <el-button size="small" @click="index=3" :type="index==3?'primary':''">住宿</el-button>
        <el-button size="small" @click="index=4" :type="index==4?'primary':''">风味</el-button>
        <el-button size="small" @click="index=5" :type="index==5?'primary':''">民俗</el-button>
        <el-button size="small" @click="index=6" :type="index==6?'primary':''">本地特产</el-button>
        <el-button size="small" @click="index=7" :type="index==7?'primary':''">人文地标</el-button>
        <el-button size="small" @click="index=8" :type="index==8?'primary':''">旅说</el-button>
        <el-button size="small" @click="index=9" :type="index==9?'primary':''">星旅指南</el-button>
        <el-button size="small" @click="index=10" :type="index==10?'primary':''">我的</el-button>
        <el-button size="small" @click="index=11" :type="index==11?'primary':''">合计</el-button>
      </div>
      <div id="myChart" :style="{width: '70%', height: '600px'}"></div>
    </div>

    <!-- alert -->
    <el-button type="text" @click="dialogTableVisible = true">文章</el-button>

    <el-dialog title="文章数据分析" width="650px" center :visible.sync="dialogTableVisible">
      <div>
        <el-row class="analysis_dialog">
          <el-col :span="24">
            <div class="fsc">
              <p>文章名称:</p>
              <p class="mg_l10">西游记</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="fsc mg_t20">
              <p>作者:</p>
              <p class="mg_l10">阿九</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="fsc mg_t20">
              <p>分属板块:</p>
              <p class="mg_l10">阿九</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="fsc mg_t20">
              <p>上架时间:</p>
              <p class="mg_l10">2019-11-12</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="fsc mg_t20">
              <p>置顶状态:</p>
              <p class="mg_l10">阿九</p>
            </div>
          </el-col>
        </el-row>
      
        <el-table class="mg_t10" :data="tableData">
          <el-table-column property="date" label="日期" width="150"></el-table-column>
          <el-table-column property="name" label="姓名" width="200"></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </span>
    </el-dialog>


    <div class="analysis_query fbc mg_r30">
      <p class="b f_16">各版块当日实时数据</p>
      <div class="fsc">
        <div class="block">
          <span class="demonstration mg_r20">选择查询时间</span>
          <el-date-picker
            v-model="value6"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['12:00:00']">
          </el-date-picker>
        </div>
        <p class="mg_l20"><el-button type="primary">查询</el-button></p>
      </div>
    </div>
    <el-table
      class="analysis_table1"
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="date"
        align="center"
        label="分属板块"
        width="150">
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="打开次数"
        width="120">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        prop="address"
        label="打开人数">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        prop="address"
        label="评论人数">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        prop="address"
        label="转发人数">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        prop="address"
        label="点赞人数">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        prop="address"
        label="收藏人数">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        width="120"
        label="想去看看">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        width="120"
        label="到此一游">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        width="120"
        label="搜索次数">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        width="120"
        label="广告转发人数">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        prop="address"
        label="转发邀请">
      </el-table-column>
      <el-table-column
        align="center"
        width="120"
        prop="address"
        label="被邀请">
      </el-table-column>
    </el-table>
    
  </div>

</template>

<script>
  import data1 from './list.js';
  export default {
    name: 'hello',
    data () {
      return {
        value6: '',
        dialogTableVisible: false,
        tableData: [{
          date: '住宿',
          name: '王小虎',
          address: '11111'
        }, {
          date: '11134入11',
          name: '吃饭',
          address: '1343788'
        }, {
          date: '2233431',
          name: '喝水',
          address: '111111'
        }, {
          date: '52341',
          name: '天天',
          address: '11323211'
        }],
        list: [],
        index: 1,
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted(){
      this.drawLine();
      console.log(data1)
      
    },
    methods: {
      isindex(num) {
        console.log(num)
        this.index = num;
        this.drawLine()
      },
      addList() {
        let obj = {};
        obj = data1.find((item)=> {
          return item.id == this.index
        })
        console.log(obj)
        this.list = [];
        obj.data.forEach((value,key)=> {
          this.list.push({name:value.name,type: 'line',data:value.data})
        })
        
      },
      drawLine(){
        this.addList();
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart'))
          // 绘制图表
          myChart.setOption({
            title: {
              left: '0',
              text: '七天趋势图',
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              orient: 'vertical', 
              backgroundColor:'#fff',
              right: '0',
              top: '40px',
              itemGap: 20, 
              // data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
            },
            grid: {
              left: '0',
              right: '100px',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                  saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: true,
              data: ['2019-1-1','2019-1-2','2019-1-3','2019-1-4','2019-1-5','2019-1-6','2019-1-7']
            },
            yAxis: {
              type: 'value',
              scale : true,
              show : true,
              splitLine:{  
          　　    show:true  
          　　}, 
            },
            series: this.list //  [{},{}]
            
          });
          
        }
     }
  }
</script>

<style scoped lang="less">
  .table_box {
    padding: 20px 5px;
    display: inline-block;
    border: 1px solid #000;
    caption {
      padding: 0 20px;
      div{
        height: 30px; 
        border-bottom: 1px solid #000;
        font-weight: bold;
      }
    }
    .analysis_table {
      td,th {
        padding: 0 3px;
        vertical-align: middle;
      }
    }
  }
  .analysis_row {
    width: 80%;
  }
  .analysis_echart {
    position: relative;
    margin-right: 100px;
    border-top: 1px solid #000;
    padding-top: 40px;
  }
  .analysis_list {
    z-index: 10;
    position: absolute;
    width: 100%;
    top: 40px;
    left: 150px;
  }
  .analysis_table1 {
    margin-bottom: 150px;
  }
  .analysis_query {
    padding-top: 40px;
    border-top: 1px solid #000;
    margin: 40px 100px 40px 20px;
  }
  .analysis_dialog {
    border-bottom: 1px solid #999;
    padding-bottom: 30px;
  }
</style>